<link rel="stylesheet/less" type="text/css" href="./bricks/component/banner/swiper.less">
<script src="./bricks/component/banner/swiper_jquery.js"></script>


<link rel="stylesheet/less" type="text/css" href="./bricks/component/banner/banner.less" />

<div class="ub-container">
    <div class="ub-banner ratio-4-1">
        <div id="swiper" class="swiper-container">
            <div class="swiper-wrapper">
                <a class="swiper-slide" style="background-image:url();"
                   data-src data-background-src="placeholder/1600x400"
                   href="#" target="_blank" ></a>
                <a class="swiper-slide" style="background-image:url();"
                   data-src data-background-src="placeholder/1600x400"
                   href="#" target="_blank" ></a>
            </div>
            <div class="swiper-pagination swiper-pagination-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>
    </div>
</div>

<script>
    (function () {
        window.DelayExecute(3000,function () {
            var swiper = new Swiper('#swiper', {
                pagination: '.swiper-pagination',
                paginationClickable: '.swiper-pagination',
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                loop: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            });
            $('#swiper').hover(function(){
                swiper.stopAutoplay();
            },function(){
                swiper.startAutoplay();
            });
        })
    })();
</script>

<div class="block-breaker"></div>
